<template>
  <div :id="containerId"></div>
</template>

<script>
import QRCode from 'qrcodejs2'; // 导入 qrcodejs2 库

export default {
  name: 'QrCode', // 组件名称
  props: {
    text: {
      type: String,
      required: true
    },
    containerId: {
      type: String,
      default: 'qrcode-container'
    },
    size: {
      type: Number,
      default: 200
    },
    fgColor: {
      type: String,
      default: '#000000'
    },
    bgColor: {
      type: String,
      default: '#ffffff'
    },
    correctLevel: {
      type: Number,
      default: QRCode.CorrectLevel.H
    }
  },
  mounted() {
    this.generateQRCode();
  },
  methods: {
    generateQRCode() {
      new QRCode(this.containerId, {
        text: this.text,
        width: this.size,
        height: this.size,
        colorDark: this.fgColor,
        colorLight: this.bgColor,
        correctLevel: this.correctLevel
      });
    }
  }
};
</script>

<style scoped>
/* 如果有样式需求，可以在这里添加 */
</style>